<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div><canvas id="canvas" width="400" height="400"></canvas></div>

    <script type="text/javascript">
        /**
         * @description: 生成webgl着色器对象的程序
         * @param {*} gl gl的上下文对象；ctx.getContext('webgl')
         * @param {*} VERTEX_SHADER_SOURCE；顶点着色器源码
         * @param {*} FRAGMENT_SHADER_SOURCE；片元着色器源码
         * @return {*} 程序对象
         */
        function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

            gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码
            gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码

            // 编译着色器
            gl.compileShader(vertexShader)
            gl.compileShader(fragmentShader)

            // 创建一个程序对象
            const program = gl.createProgram();

            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)

            gl.linkProgram(program)

            gl.useProgram(program)

            return program;
        }

        // 获取canvas元素
        const ctx = document.getElementById('canvas')

        // 获取webgl绘图上下文
        const gl = ctx.getContext('webgl')

        // // 顶点着色器代码
        const VERTEX_SHADER = `
            attribute vec4 aPosition;
            attribute float aPosSize;
            void main(){
                gl_Position = aPosition;
                gl_PointSize = aPosSize;
            }
        `;

        // 片元着色器代码
        const FRAGMENT_SHADER = `
            void main(){
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `;

        // // 创建顶点着色器
        // const vertexShader = gl.createShader(gl.VERTEX_SHADER);

        // // 创建片元着色器
        // const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);


        // // 将顶点着色器代码添加到顶点着色器中
        // gl.shaderSource(vertexShader, VERTEX_SHADER);

        // // 将片元着色器代码添加到片元着色器中
        // gl.shaderSource(fragmentShader, FRAGMENT_SHADER);

        // // 添加完成后，需要编译着色器
        // gl.compileShader(vertexShader);
        // gl.compileShader(fragmentShader);


        // const program = gl.createProgram();
        // // 将着色器添加到程序中
        // gl.attachShader(program, vertexShader);
        // gl.attachShader(program, fragmentShader);

        // // 关联program
        // gl.linkProgram(program);

        // // 使用program
        // gl.useProgram(program);

        let program = initShader(gl, VERTEX_SHADER, FRAGMENT_SHADER);
        let aPos = gl.getAttribLocation(program, 'aPosition');
        let aSize = gl.getAttribLocation(program, 'aPosSize');
        let x = 0.0;
        gl.vertexAttrib1f(aSize, 3);
        setInterval(() => {
            x = x + 0.05;
            if (x < 1.0) {
                gl.vertexAttrib1f(aPos, x);
            } else {
                x = 0.0;
            }
            // 设置背景色
            gl.clearColor(0.2, 0.8, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER);

            // 绘制点
            gl.drawArrays(gl.POINTS, 0, 1);
        }, 200)




    </script>
</body>

</html>